<template>
  <div class="crm-page home-page">
    <div class="page-header">客户详情</div>
    <div class="page-content transparent">
      <div class="page-card">
        <div class="card-title">
          <el-button class="back-btn" size="medium" type="text" icon="el-icon-back" @click="goMainBack()">返回</el-button>
          <div class="right-btns">
            <el-button :disabled="data.status===1" @click="handleUpdateStatus">更改成交状态</el-button>

          </div>
        </div>
        <div class="page-card-content">
          <div class="item-title" style="margin-top:20px">
            基本信息
          </div>
          <div class="card-item">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">客户：</span>
                <span class="content">{{ data.name }}</span>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">电话：</span>
                <span class="content">{{ data.phone }}</span>
              </el-col> -->
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">成交状态：</span>
                <span class="content">{{ data.status===0?'未成交':'已成交' }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">所有人：</span>
                <span class="content">{{ data.owner }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
          <div class="page-card">
            <div class="page-card-content">
              <div class="item-title">
                详细信息
              </div>
              <div class="card-item">
                <el-row :gutter="10">
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">客户名：</span>
                    <span class="content">{{ data.name }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">所有人：</span>
                    <span class="content">{{ data.owner }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">行业：</span>
                    <span class="content">{{ data.industryName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">客户级别：</span>
                    <span class="content">{{ data.levelText }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">客户类型：</span>
                    <span class="content">{{ data.typeText }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">人数：</span>
                    <span class="content">{{ data.employeeNumText }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <span class="title">邮箱：</span>
                    <span class="content">{{ data.email }}</span>
                  </el-col>
                  <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                      <span class="title">开票地址：</span>
                      <span class="content">
                        <span v-for="d in data.invoiceList" :key="d.address">
                          {{ `${d.province}${d.city}${d.county}${d.address}` }} <br></span>
                      </span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                      <span class="title">收货地址：</span>
                      <span class="content">
                        <span v-for="d in data.receiveList" :key="d.address">
                          {{ `${d.province}${d.city}${d.county}${d.address}` }}<br></span>
                      </span>

                    </el-col>
                  </el-row>

                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">创建人：</span>
                    <span class="content">{{ data.createName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">上次修改人：</span>
                    <span class="content">{{ data.updateName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">创建时间：</span>
                    <span class="content">{{ formatTime(data.createTime) }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">上次修改时间：</span>
                    <span class="content">{{ formatTime(data.updateTime) }}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <ContactCard v-if="data.id" :customer-id="data.id" :customer-name="data.name" />
          <ChanceCard v-if="data.id" :customer-id="data.id" :customer-name="data.name" />
          <ContractCard v-if="data.id" :customer-id="data.id" :customer-name="data.name" />
          <OrderCard v-if="data.id" :customer-id="data.id" :customer-name="data.name" />
          <InvoiceCard v-if="data.id" :customer-id="data.id" :customer-name="data.name" />
          <PayCard v-if="data.id" :customer-id="data.id" :customer-name="data.name" />

        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
          <ActivityCard
            :data="{
              name:data.name,
              relateName:data.name,
              relateId:data.id

            }"
            :type="2"
            @change="handleCardChange"
          />
          <ActivityListCard v-if="data.id" ref="listCard" :relateid="data.id" :type="2" />
        </el-col>

      </el-row>

    </div>
  </div>
</template>
<script>
import ActivityCard from '@/components/ActivityCard'
import ChanceCard from '@/components/InfoCard/ChanceCard'
import ContractCard from '@/components/InfoCard/ContractCard'
import OrderCard from '@/components/InfoCard/OrderCard'
import InvoiceCard from '@/components/InfoCard/InvoiceCard'
import PayCard from '@/components/InfoCard/PayCard'

import ActivityListCard from '@/components/ActivityListCard'
import ContactCard from '@/components/InfoCard/ContactCard'
import { getCustomer, updateStatusCustomer } from '@/api/customer'

import { getEnumText, customerLevels, Industrys, employees, customerTypes } from '@/utils/enums'
import { formatTime } from '@/utils/tools'

export default {
  name: 'CustomerInfo',
  components: { ContactCard, ActivityCard, ActivityListCard, ContractCard, ChanceCard, OrderCard, InvoiceCard, PayCard },
  data() {
    return {
      data: {

      }

    }
  },
  mounted() {
    const id = this.$route.query.id
    getCustomer({ id }).then(res => {
      this.data = res
      if (this.data.level) {
        this.data.levelText = getEnumText(customerLevels, this.data.level)
        this.data.industryName = getEnumText(Industrys, this.data.industryId)
        this.data.employeeNumText = getEnumText(employees, this.data.employeeNum)
        this.data.typeText = getEnumText(customerTypes, this.data.type)
      }
    })
  },
  methods: {
    formatTime,
    handleCardChange() {
      this.$refs.listCard.refresh()
    },
    handleUpdateStatus() {
      this.$confirm('确定要更改为已成交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatusCustomer({
          'id': this.data.id,
          'status': 1
        }).then(res => {
          this.data.status = 1
          this.$message({
            type: 'success',
            message: '更改成功!'
          })
        }).catch((error) => {
          console.log(error)
          this.$message({
            type: 'error',
            message: error.message || '更改失败'
          })
        })
      }).catch(() => {

      })
    }

  }
}
</script>

